<template>
 <div class="sign" id="sgin" >
  <div class="calender">
    <el-calendar>
    <template #dateCell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
        <p>
          {{this.isSigned(data.day)}}
        </p>
      </p>
    </template>
  </el-calendar>
  </div>
  <div id="signButton" v-show="!this.todaySign">
     <button class="sgincentent" @click="signUp()">
      <div class="qd">签到</div>
      <div class="qd_remind">今日还未签到，点击签到领取积分</div>
      </button>
  </div>
 </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import api from '@/api/sgin_index.js'
 export default {
  name: '' ,
 data () {
 return {
  // todaySign:false,
  signedList:[]
  }
 }, 
 computed:{
  ...mapState('moduleSign',['todaySign']),
 },
 mounted(){
   this.todaySigned()
   this.getSigned()
   //  页面加载完成之后强制刷新一次 刷新渲染
   if (location.href.indexOf("#reloaded")<=0) {
      location.href = location.href + "#reloaded"+"#reloaded";
      location.reload();
    }
 },
 methods:{
  ...mapMutations('moduleSign',['updateTodaySign']),
  // 签到
  signUp(){
    api.signUp().then((res) => {
      // console.log(res)
      if(res.code == 200) {
        this.$alert('', res.message ,{
          confirmButtonText: '确定',
        })
      }
    }).catch((err) => {
      console.log(err)
    });
  },
  // 判断今天有没有签到
  todaySigned(){
    var  myDate=new Date();
    let year =  myDate.getFullYear();
    let month = myDate.getMonth() + 1;
    let day = myDate.getDate()
    let today = year + '-' + month + '-' + day
    
    api.isSigned(today).then((res) => {
      // console.log(res)
      if(res.data.obj == 1){
        this.updateTodaySign()
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  // 获取已签到列表
  getSigned() {
    api.getSigned().then((res) => {
      console.log(res)
      if(res.data.code == 200){
        this.signedList = res.data.obj
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  // 
  isSigned(day){
    let res = ''
    for(let i = 0; i < this.signedList.length; i++) {
      if(this.signedList[i] == day) {
        res = '🚩'
        break
      }
    }
    return res
  }

 }
}
</script>
<style scope lang="less">
.is-selected {
  color: #67C23A;
}
.el-calendar{
  height: 650px;
}
.el-calendar-table td.is-selected {
  background-color: #F0F9EB;
}
// 今天的字体颜色
.el-calendar-table td.is-today {
    color: #67C23A;
}
/* 日历单元格鼠标经过背景色 */
.el-calendar-table .el-calendar-day:hover {
  background-color: #F0F9EB !important;
  color: #67C23A;
}
.el-calendar{
  --el-calendar-selected-bg-color:#67C23A;
}
 .el-calendar__header {
	// 修改头部背景颜色
	background-color: #F0F9EB;
	.el-calendar__title {
		// 修改头部标题的字体颜色
		// color: white !important;
		font-size: 18px;
		// font-weight: bolder;
    color: #28627C;

	}
}
.el-calendar-table {
  thead {
    th {
      // 修改头部星期部分
      background-color: #67C23A;;
      color: white;
      font-weight: 550;
    }
  }
  .is-selected {
    .el-calendar-day {
      p {
        // 选中日期颜色
        color: #67C23A;
      }
    }
  }
}
.el-calendar-table__row {
  .prev, .next {
    // 修改非本月
    .el-calendar-day {
      p {
        color: #f0d9d5;
      }
    }
  }
}
.el-button-group{
  .el-button:focus,.el-button--small:hover{
      background-color: #F0F9EB;
      color: #67C23A;
      border-color: #67C23A;
  }
}
.sgincentent{
  display: fixed;
  position: absolute;
  top: 300px;
  left: 775px;
  height: 150px;
  width: 150px;
  border-radius: 75px;
  background-color: #F0F9EB;
  border: 1px solid #67C23A;
  box-shadow: 3px 3px 3px #ccc;
  .qd{
    color: #67C23A;
    font-size: 30px;
    
  }
  .qd_remind{
    font-size: 12px;
    margin-top: 10px;
    color: #28627C;
  }
}
</style>